<template>
  <div>
     <div class="top">
       <ul class="first">
         <li><img src="" alt="" @click="fun()"></li>
         <li><img src="https://img.youpin.mi-img.com/static/weex_images/v1/icon_info_white.png" alt="" style="width:20px;height:20px"></li>
       </ul>
       <ul class="second">
         <li><img src="https://img.youpin.mi-img.com/static/weex_images/v1/logo_crowdfunding.png" alt=""></li>
          <li><p style="font-size:13px">永远年轻，永远好奇</p></li>
       </ul>
     </div>
      <div class="thirt" style="index=100;text-align: center">
            <img src="https://img.youpin.mi-img.com/shopmain/3b8e989ff3cf2eed2daaaa9efa93377c.jpg?m=0&w=1053&h=522&c=1?0_0" alt="" style="margin-top:10px">
            <ul style="background-color:white">
              <li><p style="font-size:16px">洒哇地咔蒸汽电动拖把</p></li>
              <li><van-progress pivot-text="50" color="#f2826a" :percentage="50" /></li>
              <li><p style="font-size:13px">2554人支持|剩余13天</p></li>
              <li><h3 style="color:red;margin-left:-85px">￥499</h3></li>
            </ul>
        </div>
  </div>
</template>
<script>
export default {
  methods: {
    fun(){
      this.$router.go(-1)
    }
  },
}
</script>

<style scoped>
.thirt ul li{
  margin:5px 5px
}
.thirt img{
  width: 351px;
  height: 179.5px;
}
.thirt{
  background-color: black;
  opacity: 0.7;
  margin-top: 0px;
      border-radius: 0px;
          object-fit: cover;
          /* overflow: hidden; */
}
.top{
  width: 100%;
  background-color: black;
  opacity: 0.7;
}
.top .first img{
  width: 30px;
  height: 30px;
  text-align: center;
}
.top .second p{
  color: beige;
}
.top .first{
  display: flex;
  justify-content: space-between;
}
.top .second{
  text-align: center;
}
.top .second img{
  width: 203.5px;
  height: 25px;
  
}
</style>